<template>
    <!------------------------------------ 预定服务列表 ------------------------------------
    @desc 包含商品管理列表，快速下单商品列表，核销商品列表
    @author kyle
    @date 2021-03-05
    @props
      productList  ———— 预定服务数据
    @method
      goDetailPage      ———— 进入预定详情
      goYu    ———— 进入预约
  -->
    <div>
        <!-- 预定服务列表 -->
        <ul>
            <li v-for="(item, index) in productList" :key="index" class="bg-white productItem"
                @click="goDetailPage(item, index)">
                <div class="flex">
                    <img-box class="is-130 br-10 flex-s-0" :img-url="item.logo" />
                    <div class="productItem-detail ml-20 flex-1">
                        <p class="text-show-line-2 fs-28 fw-b">{{ item.ProductName }}</p>
                        <p v-if="item.TagsList.length != 0" class="flex fs-22"><span class="lh-40 plr-8 mr-8 color-tagorg bg tag" v-for="(item2, index2) in item.TagsList" :key="index2" v-if="index2 < 3">{{item2.Name}}</span></p>
                        <p class="color-deep fs-36 mt-10 left-money"><span class="fs-28">¥</span><span class="fw-b">{{ item.V_GradePrice }}</span><span class="color-deep fs-20 fw-500"
                                v-if="item.DefaultUnit"> / {{ item.DefaultUnit }}</span>
                        </p>
                        <!-- 预约 -->
                        <div class="bg-primary color-white btn fs-24 lh-52 br-45 plr-24 br-26 yuyue"
                            v-if="item.SaleStatus==1 && item.IsFutures == 7" @click.stop="goYu(item, index)">预定
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import imgBox from 'components/imgBox'
    export default {
        name: 'ProductList',
        components: {
            imgBox
        },
        props: {
            productList: {
                type: Array,
                required: true
            },
        },
        data() {
            return {
                itemActiveIndex: 0
            }
        },
        computed: {},
        created() {},
        methods: {
            // 预定详情
            goDetailPage(item, index) {
                this.$emit('goDetailPage', item, index)
            },
            // 进入预约
            goYu(item, index) {
                this.$emit('goYu', item, index)
            },
        }
    }
</script>

<style lang="scss" scoped>
    .list-item {
        flex: 1;
        font-size: 24px;
        line-height: 70px;
    }

    .list-item-active {
        background: $colorF;
        position: relative;

        &:before {
            content: '';
            position: absolute;
            width: 40px;
            height: 4px;
            bottom: 10px;
            left: calc(50% - 20px);
            @include bg-primary;
            border-radius: 2px;
        }
    }

    .left-active {
        border-top-right-radius: 10px;

        &:after {
            content: '';
            position: absolute;
            right: -26px;
            top: 0;
            width: 0;
            height: 0;
            border-right: 30px solid transparent;
            border-bottom: 70px solid $colorF;
        }
    }

    .right-active {
        border-top-left-radius: 10px;

        &:after {
            content: '';
            position: absolute;
            left: -26px;
            top: 0;
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-bottom: 70px solid $colorF;
        }
    }

    .productItem {
        padding: 32px 22px;
        position: relative;
        z-index: 1;

        &:not(:last-child) {
            margin-bottom: 2px;
        }

        .right-arrow {
            position: relative;

            &:after {
                content: '';
                position: absolute;
                top: 40px;
                right: 0;
                width: 20px;
                height: 20px;
                border: 2px solid;
                border-color: $colorC $colorC transparent transparent;
                transform: rotate(45deg);
            }
        }

        .item-store {
            width: 170px;
            margin-right: 40px;

            .item-store-btn {
                position: relative;
                margin: 20px auto 0;
                font-size: 20px;
                line-height: 34px;
                border-radius: 17px;
                padding: 0 30px 0 20px;
                @include color-primary;
                display: inline-block;
                border: 1px solid currentColor;

                &:after {
                    content: '';
                    position: absolute;
                    top: 8px;
                    right: 15px;
                    width: 10px;
                    height: 10px;
                    border: 2px solid;
                    border-color: currentColor currentColor transparent transparent;
                    transform: rotate(45deg);
                }
            }
        }

        .item-product {
            margin-right: 10px;
            display: none;

            &:first-child,
            &:nth-child(2) {
                display: block;
            }
        }
    }

    .productItem-1 {
        padding: 0 22px;
        margin-top: 32px;
    }

    .sortable-chosen {
        box-shadow: 0 0 20px #ccc;
        z-index: 2;
        margin: 0 4px;
    }

    .left-money {
        position: relative;
    }

    .productItem-detail {
        padding-bottom: 50px;
        position: relative;

        .productItem-p-left {
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .productItem-p-right {
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .tel-text {
            color: $colorF;
            @include bg-primary;
            padding: 10px 20px;
            border-radius: 28px;
        }

        .select-box {
            display: inline-block;
            position: relative;
            padding: 0 36px 0 13px;
            line-height: 30px;
            font-size: 20px;
            border-radius: 15px;
            border: 1px solid currentColor;

            &:after {
                content: '';
                position: absolute;
                width: 10px;
                height: 10px;
                top: 5px;
                right: 10px;
                border: 1px solid;
                border-color: transparent currentColor currentColor transparent;
                transform: rotate(45deg);
            }

            .select-item-box {
                position: absolute;
                left: 0;
                color: $color3;
                width: auto;
                background: rgba(0, 0, 0, 0.1);
                z-index: 100;

                p {
                    padding-left: 13px;
                }
            }
        }
    }

    .upDown-box {
        position: absolute;
        bottom: 32px;
        right: 22px;
        width: 110px;
        height: 40px;

        .up {
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .down {
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }

    .btn-input-box {
        position: relative;
        margin: 0 4px;

        &:before {
            background: transparent;
        }

        .btn-input {
            position: relative;
            z-index: 1;
            height: 42px;
            width: 50px;
            line-height: 1;
            border: none;
            text-align: center;
        }
    }

    .bottom-popup {
        border-radius: 40px 40px 0 0;
    }

    .yuyue {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    .tag {
        min-width: 66px;
        text-align: center;
        border-radius: 4px; 
        background: rgba(255, 163, 33, 0.1);
    }
</style>
